<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" href="../../css/animate.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css/mescroll.css">
  <link rel="stylesheet" href="../../css/gloab.css">
  <title>站长广告</title>
  <style>
    .none-order{
      text-align: center;
      color:#727272;
      line-height: 200%;
      margin-top: 1rem;
    }
    .mescroll{
      position: fixed;
      top: 0;
      bottom: 0;
      height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
    }
    .zz-img{
      width:2.5rem;
      margin:0 auto;
      background:#eee;
      height:2.5rem;
      padding:auto;
      border:1px solid #dedede;
      border-radius:0.05rem;
    }
    .zz-img img{
      width:1rem;
      margin-left:0.75rem;
      margin-top:0.3rem;
    }
    .zz-img div{
      text-align:center;
      line-height:0.45rem;
      height:0.45rem;
      margin-top:0.35rem;
      font-size:0.3rem;
      color:#999;
    }
    .zz-content{
      width:90%;
      height:0.45rem;
      line-height:0.45rem;
      text-align:center;
      margin:0.25rem auto;
      font-size:0.25rem;
      color:#999;
    }
    .zz-image{
      width:5.25rem;
      height:2.65rem;
      margin:auto;
      background: #eee;
      /*overflow: hidden;*/
    }
    .zz-image img{
      width:100%;
      height: 100%;
    }
    .zz-images{
      width:85%;
      height:3rem;
      margin:0.2rem auto;
      background: #eee;
      /*overflow: hidden;*/
    }
    .zz-img-button-list{
      width:85%;
      height:1rem;
      margin:auto;
      line-height: 1rem;
    }
    .zz-img-button-list div{
      width:30%;
      float: left;
      font-size: 0.3rem;
    }
    .zz-img-button-list img{
      width:20%;
      line-height: 1rem;
      margin-top: 0rem;
      padding-top:0.2rem;
    }
    .zz-img-button-list span{
      margin-top: 0rem;
      font-size: 0.3rem;
    }
    .zz-images img{
      width:100%;
      height: 100%;
    }
    .zz-title{
      width:85%;
      height:0.45rem;
      line-height: 0.45rem;
      margin:0 auto 0.25rem;
      font-size: 0.3rem;
    }
    .zz-button{
      width:60%;
      height:0.65rem;
      text-align: center;
      background: #3b8bff;
      line-height: 0.65rem;
      margin:1rem auto;
      color:#fff;
      border-radius: 0.08rem;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="public-header">
      <div id="statusbar"></div>
      <header class="public-header">
        <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
        <div class="public-header-title">站长广告</div>
        <!-- <div class="public-header-text" @click="javascript:api.openWin({name: 'fahongbao',reload:true,url:'../home/fabu.html',});">我要发红包</div> -->
      </header>
    </div>
    <div class="dating-body auto" style="padding-bottom:0.5rem;">
      <div class="dating-body-bar flex" id="nav">
        <div class="dating-body-bar-son F1" v-for="(item,index) in res" :style="indexs==index?'':'background-color:#eaeff4;color:#64aafc;'"  @click="getList(index)">{{item}}</div>
      </div>
      <div v-if="indexs==0">
          <div class="zz-img" style="" @click="uploadImg">
            <img id="img" src="../../image/public/add.png" alt="">
            <div>发布站长广告</div>
          </div>
                        
          <div class="zz-title" style="margin-top:1rem;">
            广告跳转
          </div>
          <div class="zz-title" style="border-bottom:1px solid #999;padding-bottom:0.15rem;">
            <input type="text" v-model="url" placeholder="请输入跳转链接（选填）">
          </div>
          <div class="zz-button" @click="fabu">发布广告</div>
      </div>
      <div v-else>
          <div v-if="webList&&webList.length>0" v-for="(item,index) in webList">
            <div class="zz-images" style="position:relative;top:0;">
              <!-- <img src="../../image/public/up3.png" alt="" style="width: 0.3rem;height:0.3rem;position:absolute;right:-0.1rem;top:-0.1rem;" @click=""> -->
               <img :src="apiUrl+item.image" alt="">
            </div>
            <div class="zz-img-button-list">
              <div style="margin-left:8%;"  @click="edit(index)">
                <img src="../../image/public/bj.png" alt="">
                <span>编辑</span>
              </div>
              <div style="margin:auto;" @click="delValue(index)">
                <img src="../../image/public/del.png" alt="">
                <span>删除</span>
              </div>
              <div style="margin-right:2%;">
                <img src="../../image/public/dj.png" alt="">
                <span>{{item.num}}</span>
              </div>
            </div>
        </div>
      </div>
      <div class="public-progress" style="z-index:9;">
        <img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
      </div>
    </div>
  </div>

</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/mescroll.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/fastclick.js"></script>

<script>
var vm;
var mescroll;
var mySwiper;
apiready=function(){
  api.removeLaunchView();
  setBar("statusbar");
  setFont(750);
  startVue();
  // NewMescroll();
  var top=$("#public-header").outerHeight(true)+$("#nav").outerHeight(true);
  $("#mescroll").css({"top":top+"px"});
  $(".public-progress").fadeOut(1000);
  setTimeout(function(){
    $(".public-progress").css({"display":"none"});
  },1000);
}
function startVue(){
  vm = new Vue({
    el:"#app",
    data:{
      gdtt:['50','100','200','300','500','1000'],
      num:0,
      banner:["../../image/tg/tg1.jpg","../../image/tg/tg2.jpg","../../image/tg/tg3.jpg"],
      list:[],
      res:['发布广告','管理广告'],
      indexs:'0',
      page:1,
      showpage:8,
      images:[],
      url:'',
      webList:[],
    },
    created:function(){
    },
    mounted:function(){
    },
    methods:{
      del:function(){
        vm.images = {}
      },
      edit:function(index){
        api.openWin({
            name: 'editzzguanggao',
            url: './editzzguanggao.html',
            pageParam: {
                id: vm.webList[index].id
            }
        });
      },
      //删除站长广告
      delValue:function(index){
        var dialogBox = api.require('dialogBox');
        dialogBox.alert({
            texts: {
                content: '确定删除该条广告？',
                leftBtnTitle: '取消',
                rightBtnTitle: '确认'
            },
            styles: {
                bg: '#fff',
                w: 300,
                corner:2,
                content: {
                    color: '#000',
                    size: 14
                },
                left: {
                    marginB: 7,
                    marginL: 20,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#fff',
                    size: 12
                },
                right: {
                    marginB: 7,
                    marginL: 10,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#fff',
                    size: 12
                }
            }
        }, function(ret) {
            if (ret.eventType == 'left') {
                var dialogBox = api.require('dialogBox');
                dialogBox.close({
                    dialogName: 'alert'
                });
                msg('已取消');
            }else if(ret.eventType == 'right'){
              var dialogBox = api.require('dialogBox');
              dialogBox.close({
                  dialogName: 'alert'
              });
              api.ajax({
                  url: apiUrl+'api/home/delValue',
                  method: 'post',
                  data: {
                      values: {
                        id:vm.webList[index].id,
                      },
                  }
              },function(ret, err){
                  if (ret.status) {
                    msg(ret.msg);
                    vm.getList(index=1);
                  } else {
                    msg(ret.msg);
                  }
              });
            }
        });
      },
      fabu:function(){
        if (vm.images=="") {
          msg('请上传广告图片');
          return;
        }
        var newStr = "";
        newStr += "{";
        for (var i = 0; i < vm.images.length; i++) {
            newStr += '"file' + i + '":"' + vm.images[i] + '",';
        }
        newStr += "}";
        api.ajax({
            url: apiUrl+'api/home/addWebmaster',
            method: 'post',
            data: {
                values: {
                  uid:post_en($api.getStorage('uid')),
                  url:post_en(vm.url),
                },
                files: eval('(' + newStr +')')
            }
        },function(ret, err){
            if (ret.status) {
              msg(ret.msg);
              setTimeout(function(){
                api.closeToWin({
                    name: 'root'
                });
                api.execScript({
                    name: 'root',
                    script:'qhSelect(0);'
                });
              },500)
            } else {
              msg(ret.msg);
            }
        });
      },
      //访问相册和相机获取图片
      uploadImg:function(){
        if (vm.images.length==1) {
          msg('上传图片达到上限');
          return;
        }
        choose_methods(1,0,vm.images);
      },
      getList:function(index){
        vm.indexs = index;
        if (index==1) {
          api.ajax({
              url: apiUrl+'api/home/webmasterList',
              method: 'post',
              data: {
                  values: {
                    uid:post_en($api.getStorage('uid')),
                  },
              }
          },function(ret, err){
              if (ret.status) {
                vm.webList = ret.data;
              } else {
                vm.webList = '';
              }
          });

        }
      },
      more:function(obj){
        if(obj.num){
          vm.page++;
        }else{
          vm.page=1;
          mescroll.lockUpScroll(false);
        }
      },
    }
  })
}
function NewMescroll(){
  mescroll = new MeScroll("mescroll", {
      down:{
        use:true,
        auto:true,
        // autoShowLoading:true,
        callback:vm.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      },
      up:{
        use:true,
        auto:false,
        lazyLoad: {
          use: true, // 是否开启懒加载,默认false
          attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
          showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
          delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
          offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
        },
        callback:vm.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      }
    })
}

</script>
</html>
